body{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* banner图 */
.banner{
    width: 100%;
    height: 20rem;
    background: rgb(95, 196, 255);
}
.swiper-container{
    width: 100%;
    height: 20rem;
}


main{
    flex: 1;
    overflow-y: scroll;
}
/* 今日排名 */
.main1{
    width: 100%;
    height: 15rem;
    /* background: aquamarine; */
    margin: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.main1>.left1{
    width: 15rem;
    height: 15rem;
    background: #54afd9;
    border-radius: 1.5rem;
    position: relative;
    overflow: hidden;
}
.left1 span{
    position: absolute;
    left: 1rem;
    top: .1rem;
    font-size: 2.5rem;
    z-index: 999;
    font-family: 'PingFangSC';
    font-weight: bold;
    color: #004E73;
}
.left1>.icon1{
    position: absolute;
    left: 4rem;
    top: 9rem;
    width: 12.1rem;
    height: 12.1rem;
    background: url('../img/index-card-rank.png') no-repeat;
    background-size: 100%;
}
.left1>.num{
    position: absolute;
    right: .3rem;
    bottom: 1rem;
    font-size: 4rem;
    color: #fff;
    font-family: 'PingFangSC';
    font-weight: bold;
}
/* 累计打卡 */
.main1>.right1{
    width: 21.2rem;
    height: 15rem;
    background: #9ed9f7;
    border-radius: 1.5rem;
    position: relative;
}
.clock{
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 2rem;
    color: #005177;
    font-weight: bold;
    z-index: 100;
}
.icon5{
    width: 11rem;
    height: 11rem;
    background: url('../img/index-card-sum.png') no-repeat;
    background-size: 100%;
    position: absolute;
    left: .2rem;
    top: 3.8rem;
}
/* 今日打卡 */
.newClock{  
    z-index: 8888;
    font-size: 1.6rem;
    font-family: 'PingFangSC';
    font-weight: bold;
    color: #005177;
    position: absolute;
    right: 0;
    bottom: 2rem;
    width: 10rem;
    height: 4rem;
    line-height: 3.5rem;
    text-align: center;
    border-radius: 2.5rem;
    border: .3rem solid #005177;
}


/* 运动数据 */
.main2{
    width: 100%;
    height: 11rem;
    /* background: rgb(243, 212, 201); */
    margin: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    overflow: hidden;
}
.main2>.left2{
    position: relative;
    width: 18rem;
    height: 11rem;
    background:url('../img/sport.png') no-repeat;
    background-size: 100%;
    border-radius: 1.5rem;
}
.left2 span{
    position: absolute;
    left: 1rem;
    top: 1.2rem;
    width: 6.4rem;
    height: 2.2rem;
    font-size: 1.6rem;
    color: #fff;
    font-family: 'PingFangSC';
    font-weight: bold;
}
/* 累计徽章 */
.main2>.right2{
    position: relative;
    width: 18.5rem;
    height: 11rem;
    background: #9dbde3;
    border-radius: 1.5rem;
}
.right2>.hz{
    position: absolute;
    left: 1rem;
    top: 1rem;
    color: #005177;
    font-size: 1.6rem;
    font-weight: bold;
}
.icon3{
    position: absolute;
    left: 0;
    top: 3rem;
    width: 11rem;
    height: 11rem;
    background:url('../img/index-card-badge.png') no-repeat;
    background-size: 86%;
}

.num2{
    position: absolute;
    right: 3rem;
    bottom: 1rem;
    font-size: 8rem;
    font-family: '黑体';
    color: #005177;
    font-weight: bold;
}
.right2>.mei{
    position: absolute;
    right: 1rem;
    bottom: 2rem;
    font-size: 2rem;
    color: #005177;
    font-family: 'PingFangSC';
}



/* 课程训练 */
.main3{
    position: relative;
    width: 100%;
    height: 11rem;
    /* background: rgb(194, 220, 245); */
    margin: 1rem 0;
    display: flex;
    justify-content: center;
}
.practice{
    width: 38.5rem;
    height: 11rem;
    background: url('../img/yd.jpg') no-repeat;
    background-position-y: -2rem;
    background-size: 100%;
    border-radius: 1.5rem;
}
.practice span{
    position: absolute;
    left: 2.4rem;
    top: 1rem;
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
}


/* 户外跑步 */
.main4{
    position: relative;
    width: 100%;
    height: 11rem;
    /* background: rgb(162, 243, 193); */
    margin: 1rem 0;
    display: flex;
    justify-content: center;
}
.sport{
    width: 38.5rem;
    height: 11rem;
    background: url('../img/sports.png') no-repeat;
    background-size: 100%;
    background-position-y: -5rem;
    border-radius: 1.5rem;
}
.sport span{
    position: absolute;
    left: 2.4rem;
    top: 1rem;
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
}